<template>
  <div class="main-container">
     <div class="list" >
        <ul
          v-infinite-scroll="loadList"
          id="list-wrapper"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
          class="list-demo"
          style="margin-botto2m: 2.3rem; overflow: auto; margin-top:0;"
        >
          <template v-for="item in dataList">
            <li class="clickreport-luna-post visiblereport-luna-card">
              <a class="list_demo_a" @click="gotoSession(item.sessionId)" 
                ><div class="list_left">
                  <img :src="item.avatar" />
                </div>
                <dl class="list_right">
                  <dt class="item_title">{{ item.name }}</dt>
                  <dd class="attr-demo">{{ item.lastMsg }}</dd>
                  <dd class="thirddd">
                    <span class="price-demo">{{ item.price }} </span>
                    <span class="right_item_label">
                      <span class="list-demo-time">
                        {{ dateFormat(item.date) }}
                      </span>
                    </span>
                  </dd>
                </dl>
              </a>
            </li>
          </template>
        </ul>
      </div>

      <div
        v-show="scroll.loading"
        class="load"
        id="infomore"
        style="display: block"
      >
        <i></i>加载更多
      </div>
      <div v-show="scroll.noMore" id="bottom" style="display: block">
        我是有底线的，没有更多信息啦~
      </div>
  </div>
</template>

<script>
import { getSessionListApi } from "@/api/webApi.js"
import { ElButton } from "element-plus"
import BaseListComponent from '@/pages/BaseListComponent.js'
import { dateFormatForList } from "@/utils/common.js"

export default {
  name: "SessionList",
  mixins:[BaseListComponent],
  // components:{getSessionList},
  setup() {},
  created() {},
  mounted() {},
  methods:{
    dateFormat:dateFormatForList,
    getSessionList: getSessionListApi,
    gotoSession(sid){
      this.$router.push('/session/detail?sid='+sid)
    }
  },
  data() {
    return {
        loadListMethod:'getSessionList',
    }
  },
}
</script>

<style scoped>
.list_demo_a .item_title{

}
.list_demo_a .attr-demo{
  margin-top: 0.4rem;
}
.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

@import url("@/assets/css/list_20_ershou_new_v20170613192207.css");
</style>
